<template>
    <div class="system-user-dialog-container">
      <el-dialog :close-on-click-modal="false" :title="dataForm.userId ? $t('common.editBtn') : $t('common.addBtn')"
                 draggable v-model="visible">
        <el-form :model="dataForm" :rules="dataRules" label-width="90px" ref="dataFormRef" v-loading="loading">
          <el-row :gutter="20">

            <el-col :span="12" class="mb20">
              <el-form-item :label="$t('bar.pageNumber')" prop="pageNumber">
                <el-input v-model="dataForm.pageNumber" type="number"></el-input>
              </el-form-item>
            </el-col>
            
            <el-col :span="12" class="mb20">
              <el-form-item :label="$t('bar.country')" prop="country">
                <el-select filterable clearable v-model="dataForm.country"  >
                  <el-option :key="item.value" :label="item.label" :value="item.value" v-for="item in countryData">
                  </el-option>
                </el-select>
              </el-form-item>
            </el-col>

            <el-col :span="12" class="mb20">
              <el-form-item :label="$t('bar.supplierName')" prop="supplierName">
                <el-select filterable clearable v-model="dataForm.supplierName" @change="supplierChange" >
                  <el-option :key="item.id" :label="item.text" :value="item.value" v-for="item in supplierData">
                  </el-option>
                </el-select>
              </el-form-item>
            </el-col>

            <el-col :span="12" class="mb20">
              <el-form-item :label="$t('bar.supplierCode')" prop="supplierCode">
                <el-input v-model="dataForm.supplierCode" disabled></el-input>
              </el-form-item>
            </el-col>

            <el-col :span="12" class="mb20">
              <el-form-item :label="$t('bar.printCout')" prop="PrintCount">
                <el-input v-model="dataForm.PrintCount" type="number"></el-input>
              </el-form-item>
            </el-col>

          </el-row>
        </el-form>
        <template #footer>
                  <span class="dialog-footer">
                      <el-button @click="visible = false">{{ $t('common.cancelButtonText') }}</el-button>
                      <el-button @click="onSubmit" type="primary" :disabled="loading">{{
                $t('common.confirmButtonText')
              }}</el-button>
                  </span>
        </template>
      </el-dialog>
    </div>
  </template>
  
  <script lang="ts" name="spDialog" setup>
  import {useMessage} from '/@/hooks/message';
  import { getDicItems,printQrcode} from '/@/api/platform/wms/reprintbarcode';
  import { ref,reactive } from 'vue';
  
  // 通知父组件刷新
  const emit = defineEmits(['refresh']);
  // 定义变量内容
  const dataFormRef = ref();
  const visible = ref(false);
  const supplierData = ref<any[]>([]);
    
  const loading = ref(false);
  const size = ref<'default' | 'large' | 'small'>('default');
  import {useI18n} from 'vue-i18n';
  const {t} = useI18n();
  
  const dataForm = reactive({
    pageNumber:1,
    supplierName:'MF',
    country:'C',
    OperatePage:'ReprintBarcode',
    IsCreateBarcode:true,
    PrintCount:1
  });
  
  const countryData = ref([
	{ label: t('bar.cn'), value: 'C' },
    { label: t('bar.mx'), value: 'M' },
    ]);
  // 打开弹窗
  const openDialog = async (printerName: string) => {
    visible.value = true;
    dataForm.printerName=printerName;
    // 重置表单数据
    nextTick(() => {
      dataFormRef.value?.resetFields();
    });
  
    getSuppliers();
  };


  //供应商变更
  const supplierChange=(value)=>{
    if(value==''){
        dataForm.supplierCode=null;
      return;
    }
    dataForm.supplierCode=value;
  }



  // 获取供应商
  const getSuppliers = () => {
    getDicItems({"code":"SupplierSelection"}).then((res) => {
        supplierData.value =res.data;
        //供应商河供应商代码默认选择第一个
        dataForm.supplierCode=res.data[0].value;
    });
  };

  // 提交
  const onSubmit = async () => {
    const valid = await dataFormRef.value.validate().catch(() => {
    });
    if (!valid) return false;
  
    try {
        loading.value = true;
        for(var i=0;i<dataForm.pageNumber;i++){
            await printQrcode(dataForm).then((res)=>{});
        }
        
        visible.value = false; // 关闭弹窗
        //emit('refresh');
    } catch (error: any) {
      useMessage().error(error.msg);
    } finally {
      loading.value = false;
    }
  };
  
  // 暴露变量
  defineExpose({
    openDialog,
  });
  </script>
  